<template>

  <div class="app-container">
    <h2 style="text-align: center;">我的数据</h2>
    <h3 v-show="list.length===0 && fid === null">暂无数据</h3>
    <el-descriptions v-show="fid !== null" :column="3" title="文件信息" class="file-info margin-top" border>
      <el-descriptions-item label="文件名">{{ info.name }}</el-descriptions-item>
      <el-descriptions-item label="上传时间">{{ info.createTime }}</el-descriptions-item>
      <el-descriptions-item label="状态">
        <el-tag size="small">
          {{
            info.status===0?'未清洗':
            info.status===1?'未分析':
            info.status===2?'已完成':"已删除"
          }}
        </el-tag>
      </el-descriptions-item>
      <el-descriptions-item v-show="info.status>=1" label="清洗时间">{{ info.cleanTime }}</el-descriptions-item>
      <el-descriptions-item v-show="info.status>=2" label="分析完成时间">{{ info.operateTime }}</el-descriptions-item>
    </el-descriptions>
    <h2 style="text-align: center;">
      <span v-show="fid !== null">数据详情</span>
      <el-select v-model="mode" placeholder="请选择">
        <el-option
          v-for="item in modeOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"/>
      </el-select>
    </h2>
    <percentFilter v-show="list.length !==0&&mode=='query'" :full="condition" :list="list" :sort="sort"/>
    <resultBox v-if="list.length !==0&&mode=='show'" :list="list"/>
  </div>
</template>
<script>
import analyze from '@/api/analyze'
import percentFilter from '@/components/PercentFilter'
import resultBox from '@/components/analyze/index.vue'

export default{
  components: {
    resultBox,
    percentFilter
  },
  data() {
    return {
      modeOptions: [{
        value: 'query',
        label: '成功率查询'
      }, {
        value: 'show',
        label: '成功率趋势'
      }],
      mode: 'query',
      fid: null,
      list: {},
      info: {
        name: null
      },
      sort: [],
      condition: {},
      nowPage: 1,
      limit: 5,
      total: 0
    }
  },
  watch: { // 监听
    $route(to, from) {
      if (this.$route.params && this.$route.params.id) {
        this.fid = this.$route.params.id
        this.getInfo()
      } else {
        this.fid = null
        this.getResult()
      }
    }
  },

  created() {
    if (this.$route.params && this.$route.params.id) {
      this.fid = this.$route.params.id
      // 调用根据id查询课程的方法
      this.getInfo()
    } else {
      this.getResult()
    }
  },

  methods: {
    // 获取分析的结果
    getResult() {
      analyze.getAnalyzeResult(this.nowPage, this.limit)
        .then(response => {
          this.list = response.data.result
          this.condition = response.data.condition
          this.sort = response.data.sort
        })
    },
    getInfo() {
      analyze.getAnalyzeInfo(this.fid)
        .then(response => {
          this.list = response.data.result
          this.info = response.data.basic
          this.condition = response.data.condition
          this.sort = response.data.sort
        })
    }
  }
}
</script>
<style lang="scss">
.file-info {
	margin-bottom: 20px;
}
</style>
